<template>
	<view class="coupon">
		<view class="left">
			<view class="price">
				{{item.value/100}}
				<text style="font-size: 24upx;">元</text>
			</view>
			<view class="desc">
				{{item.valuedesc}}
			</view>
		</view>
		<view class="mid">
			<view class="desc">
				{{item.name}}
			</view>
			<view class="time">
				{{start}}
			</view>
			<view class="time">
				{{end}}
			</view>
		</view>
		<view class="right">
			<view class="btn" @click="getCoupon(item._id)">立即领取</view>
		</view>
	</view>
</template>

<script>
	import Number from "@/utils/number.js"
	const User  = uniCloud.importObject('user')
	export default {
		computed:{
			start(){
				return  Number.datetime(this.item.start)
			},
			end(){
				return  Number.datetime(this.item.end)
			}
		},
		props: {
			item: {
				type: Object
			}
		},
		methods:{
			getCoupon(coupon_id){
				User.getCoupon("637cd4b1819ce8ab0cc8bb48",coupon_id).then(res=>{
					console.log(res);
				})
			}
		}
	}
</script>

<style>
	.coupon{
		height: 100upx;
		background-color: #FFEDE6;
		padding: 20upx;
		display: flex;
		margin: 10upx 0;
		border-radius: 10upx;
	}
	.left{
		width: 120upx;
	}
	.btn{
		display: inline-block;
		background-color: #ff5e15;
		width: 150upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 100px;
		font-size: 24upx;
		color: #fff;
	}
	.price{
		color: #ff5e15;
		font-weight: bold;
		font-size: 36upx;
		height: 60upx;
		line-height: 60upx;
	}
	.desc{
		font-size: 24upx;
		color: #999;
		height: 40upx;
		line-height: 40upx;
	}
	.mid{
		flex-grow: 1;
	}
	.mid .desc{
		color:#222;
	}
	.time{
		font-size: 24upx;
		color: #999;
		height: 40upx;
		line-height: 40upx;
	}
</style>
